<template>
	<!-- 歌曲信息 -->
	<div class="song" @click.stop="playSong">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1533371_cpt0c9dkv1.css" />
		<!-- 歌曲封面 -->
		<div class="songCover">
			<img :src="songData.Img" alt="">
		</div>
		<!-- 歌手、专辑 -->
		<div class="songPro">
			<div class="author">
				<p>{{songData.songName}}</p>
			</div>
			<div class="songName">
				<p v-for="(it,idx) in songData.ar">{{it.name}}</p>
				<p> - {{songData.al}}</p>
			</div>
		</div>
		<i @click.stop="changeState" class="iconfont" :class="showState"></i>

	</div>
</template>

<script>
	import api from '../js/api.js'
	import audio from '../js/api.js'

	export default {
		props: ['songData', 'playList', 'curIindex'],
		data() {
			return {}
		},
		mounted() {},
		methods: {
			playSong() {
				let songUrl = `https://music.163.com/song/media/outer/url?id=${this.songData.id}.mp3`
				window.console.log(this.audio);
				this.audio.playSong(songUrl);
				this.axios({
					url: api.songDetail + `?ids=${this.songData.id}`
				}).then(res => {
					this.$store.commit("setCurrnetSong", res.data.songs[0])
					// 背景图片
					// this.songBackg = "background-image: url(" + this.consoleSong.al.picUrl + ");"
				});
				// 当前专辑列表的所有歌曲存入vuex的播放列表中
				this.$store.commit("setPlaySongList", this.playList);
				// 存入当前播放歌曲在列表内的下标
				this.$store.commit("setPlayingIndex", this.curIindex);
			},
			changeState(e) {  //点击播放/暂停
				event.stopPropagation();
				
				if(this.playingIindex==this.curIindex){
					if (this.playerStare == "playing") {
					this.audio.pause();
					this.$store.commit("changePlayerState", 'pause');
					} else {
					this.audio.play();
					this.$store.commit("changePlayerState", 'playing');
					}
				}else{
					this.playSong();
				}
				
				
			},
		},
		computed: {
			playingIindex() {
				return this.$store.state.playingIindex
			},
			showState(){
				if(this.playingIindex==this.curIindex && this.playerStare =='playing'){
					return 'icon-zanting'
				}else{
					return 'icon-bofang'
				}
			},
			playerStare() {
				return this.$store.state.playerStare
			},
		}
	}
</script>

<style lang="scss" scoped>
	.song {
		width: 100%;
		height: 53px;
		display: flex;
		margin: 5px 0 5px 0;
		padding: 5px 0 5px 0;
		justify-content: end;
		border-bottom: 1px solid skyblue;

		.songCover {
			width: 50px;
			height: 48px;
			margin-left: 5px;
			text-align: center;

			img {
				width: 90%;
				border-radius: 50%;
			}
		}

		.songPro {
			width: 280px;
			float: left;
			margin-left: 20px;

			.author {
				height: 25px;
				text-align: left;
				margin-left: 5px;

				p {
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}

			.songName {
				height: 17px;
				font-size: 13px;
				display: flex;
				justify-content: end;
				text-align: left;
				margin-left: 5px;

				p {
					padding-right: 5px;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}
		}

		i {
			font-size: 24px;
			margin: 10px 10px 0 10px;
			float: right;
			text-align: right;
			background-color: white;
		}
	}
</style>
